<template>
  <div class="u-page u-page-process-bg u-box">
    <!-- 标题 -->
    <div class="u-cl-white u-pt-20 u-pb-20">
      <div class="u-fz-26 u-font-bold">发布您的需求</div>
      <div class="u-number u-pb-10 u-pt-10">
        我们将根据您填写的内容为您匹配合适的拍档
      </div>
    </div>

    <!-- 表单 -->
    <div
      class="rule-form rule-form-input-right u-box u-radius-lg u-shadow u-bcl-white"
    >
      <u-form ref="uForm" :model="form">
        <u-form-item label="需求名称" prop="subject">
          <u-input
            placeholder="请填写需求名称"
            v-model="form.subject"
          ></u-input>
        </u-form-item>
        <u-form-item
          label="需求描述"
          label-position="top"
          prop="details"
          :border-bottom="false"
        >
          <u-input
            type="textarea"
            placeholder="请简单概括需求，如项目背景、项目要求、实现成果、预计完成日期等，1000字以内。 "
            maxlength="8000"
            height="200"
            v-model="form.details"
          ></u-input>
          <!--          <div class="aui-file">
            <Upload
              u_appid="ExpertCooperate"
              :u_fieldName="form.createUser"
              :u_orunid="form.taskNum"
              u_type="3"
              :u_readonly="false"
              :u_initialAttchments="ResumeFiles"
              @receiveAttachmentsData="getData"
            >
            </Upload>
          </div>-->
        </u-form-item>
        <u-form-item label="项目预算（元）" prop="Budget">
          <div style="display: flex; flex-direction: column">
            <div>
              <div style="float: left; margin-top: 20rpx">
                <u-icon
                  name="question-circle"
                  v-on:click="showTips('tips')"
                ></u-icon>
              </div>
              <div style="float: right; width: 350rpx">
                <u-input
                  type="number"
                  @click="showTips"
                  placeholder="请填写金额"
                  v-model="form.budget"
                ></u-input>
              </div>
            </div>
            <div class="priceTips">*发布需求需要预缴项目款，项目款可退还。</div>
          </div>
        </u-form-item>
        <div>
          <u-modal v-model="modal_show" title="温馨提示" confirm-text="已知晓">
            <div class="u-p-20">
              <p style="text-indent: 2em">
                1、为保障需求的真实性与提高报名率，发布需求时需全额支付项目款，项目结束后（含项目已完成、项目匹配失败、截止报名仍然未能匹配合适人员）退还项目款。
              </p>
              <br />
              <p style="text-indent: 2em">
                2、为保障服务质量，项目顺利完成后，平台需收取3%作为本次项目的服务费。
              </p>
              <br />
            </div>
          </u-modal>
        </div>

        <u-form-item label="付款方式" prop="paymentType">
          <u-input
            type="select"
            placeholder="请选择"
            @click="paymentShow = true"
            v-model="form.paymentType"
          ></u-input>
        </u-form-item>

        <u-form-item label="报名截止时间" prop="deadline">
          <u-input
            type="select"
            placeholder="请选择"
            @click="deadlineShow = true"
            v-model="form.deadline"
          ></u-input>
        </u-form-item>

        <u-form-item label="关键字" prop="keywords">
          <div class="u-flex u-col-center">
            <!-- 已添加的标签列表 -->
            <div class="u-scroll-x u-mr-5" style="width: 470rpx">
              <u-tag
                v-for="(item, index) in form.keywords"
                :key="index"
                :text="item.label"
                type="info"
                mode="dark"
                close-color="#828282"
                closeable
                @click="onCloseTag(index)"
              ></u-tag>
            </div>

            <!-- 添加标签按钮 -->
            <div class="u-center">
              <u-icon
                class="u-pointer"
                name="plus-circle"
                size="46"
                @click="toTagSettingPage(form.keywords, 4)"
              ></u-icon>
            </div>
          </div>
        </u-form-item>
        <div class="aui-flex2 aui-choice-white b-line">
          <div class="aui-flex-box">
            <div class="aui-flex-box">缩略图</div>
            <div style="margin-top: 10px;">
              <div class="pictrues-box">
                <Upload u_appid="PersonalContact" u_fieldName="images" :u_orunid="form.taskNum"
                        u_type="2" u_limit="1" :u_initialAttchments="ImageFiles"
                        @receiveAttachmentsData="getImageFiles"></Upload>
              </div>
            </div>
          </div>
        </div>
      </u-form>
    </div>

    <!-- 按钮 -->
    <div class="u-mt-20">
      <u-button
        :disabled="disable"
        type="primary"
        shape="circle"
        @click="submitStep1"
      >
        支付并发布
      </u-button>
    </div>

    <!-- 保证金列表 -->
    <u-select
      :list="paymentList"
      @confirm="(event) => (form.paymentType = event[0].label)"
      v-model="paymentShow"
    ></u-select>

    <!-- 截至时间 -->
    <u-picker
      mode="time"
      :params="timeParams"
      @confirm="
        (event) => (form.deadline = `${event.year}-${event.month}-${event.day}`)
      "
      v-model="deadlineShow"
    ></u-picker>
    <!-- 选择支付的方式 -->
    <u-popup v-model="showItem" mode="bottom" @close="closePopup">
      <div class="popup-box">
        <div
          class="popup-item"
          v-for="(item, index) in chooseTypes"
          @click="clickPopup(item)"
        >
          <div>{{ item.text }}</div>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script src="./js/publishJob.js"></script>
<style src="./css/publishJob.scss" lang="scss"></style>
